<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="ajax.js"></script>
    <script>
        window.onload = function () {
            findContry();
        }

        async function findContry() {
            // await axios.get("/contry/findAll").then(e=>{
            //     let str="";
            //     for(let i=0;i<e.data.length;i++){
            //         let contryObj=e.data[i];
            //         str+=`<option value="${contryObj.id}">${contryObj.name}</option>`
            //     }
            //     getObject("contrySelect").innerHTML=str;
            // });
            let info = await ajaxGet("/contry/findAll");
            let str = "";
            for (let i = 0; i < info.length; i++) {
                let contryObj = info[i];
                str += `<option value="${contryObj.id}">${contryObj.name}</option>`
            }
            getObject("contrySelect").innerHTML = str;
            findCity();
        }

        function getObject(id) {
            return document.getElementById(id);
        }

        async function findCity() {
            let info=await ajaxGet("/city/findByContry",{contryId:getObject("contrySelect").value});
            let str="";

            for (let i=0;i<info.length;i++){
                let cityObj=info[i];
                str+=`<option value="${cityObj.id}">${cityObj.name}</option>`
            }
            getObject("citySelect").innerHTML=str;
        }
    </script>
</head>
<body>
<select id="contrySelect" style="width: 100px;margin-left: 50px" onchange="findCity()"></select>
<select id="citySelect" style="width: 100px"></select>
</body>
</html>